<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转工具箱</title>
	</head>
	<style>
		* {
		    margin: 0;
		    padding: 0;
		    list-style: none;
		}
		
		body {
		    height: 100vh;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    background-color: #e8e8e8;
		}
		
		.menu {
		    position: relative;
		    width: 200px;
		    height: 200px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		}
		
		.btn {
		    position: absolute;
		    width: 60px;
		    height: 60px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    background-color: #fff;
		    border-radius: 50%;
		    z-index: 1000;
		    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
		    cursor: pointer;
		    transition: all 1.25s;
		}
		
		.btn i {
		    font-size: 32px;
		}
		
		.menu span {
		    position: absolute;
		    left: 0;
		    transform-origin: 100px;
		    transition: .5s;
		    transition-delay: calc(.1s * var(--i));
		    transform: rotate(0deg) translateX(80px);
		    width: 40px;
		    height: 40px;
		    background-color: #fff;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    border-radius: 50%;
		    cursor: pointer;
		    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
		}
		
		.menu:hover .btn {
		    transform: rotate(315deg);
		}
		
		.menu:hover span {
		    transform: rotate(calc(360deg / 8 * var(--i)));
		}
		
		.menu span i {
		    transform: rotate(calc(360deg / -8 * var(--i)));
		}
		
		.menu span:hover i {
		    color: #f51760;
		}
		
		@font-face {
		    font-family: "iconfont";
		    /* Project id 4090357 */
		    src: url('//at.alicdn.com/t/c/font_4090357_z2qpnic06um.woff2?t=1685189584312') format('woff2'),
		        url('//at.alicdn.com/t/c/font_4090357_z2qpnic06um.woff?t=1685189584312') format('woff'),
		        url('//at.alicdn.com/t/c/font_4090357_z2qpnic06um.ttf?t=1685189584312') format('truetype');
		}
		
		.iconfont {
		    font-family: "iconfont" !important;
		    font-size: 16px;
		    font-style: normal;
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
		}
		
		.icon-add:before {
		    content: "\e60c";
		}
		
		.icon-home:before {
		    content: "\e604";
		}
		
		.icon-more:before {
		    content: "\e606";
		}
		
		.icon-gift:before {
		    content: "\e611";
		}
		
		.icon-setting:before {
		    content: "\e612";
		}
		
		.icon-message:before {
		    content: "\e613";
		}
		
		.icon-star:before {
		    content: "\e618";
		}
		
		.icon-cart:before {
		    content: "\e61d";
		}
		
		.icon-money:before {
		    content: "\e61e";
		}
	</style>
	<body>
		<div class="menu">
		    <div class="btn"><i class="iconfont icon-add"></i></div>
		    <span style="--i: 0;"><i class="iconfont icon-home"></i></span>
		    <span style="--i: 1;"><i class="iconfont icon-more"></i></span>
		    <span style="--i: 2;"><i class="iconfont icon-gift"></i></span>
		    <span style="--i: 3;"><i class="iconfont icon-setting"></i></span>
		    <span style="--i: 4;"><i class="iconfont icon-message"></i></span>
		    <span style="--i: 5;"><i class="iconfont icon-cart"></i></span>
		    <span style="--i: 6;"><i class="iconfont icon-money"></i></span>
		    <span style="--i: 7;"><i class="iconfont icon-star"></i></span>
		</div>
	</body>
</html>